.TransportLogin {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    &>.LoginBack {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    &>.ScreenLogin__Box {
        width: 634px;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        z-index: 1;

        &>.Top {
            width: 100%;
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: center;

            &>img {
                flex: 1;
                height: 100%;
                display: block;
                user-select: none;
            }

            &>.TopR {
                transform: scaleX(-1);
            }
        }

        &>.Box {
            width: 100%;
            flex: 1;
            background: linear-gradient(45deg,
                    rgba(0, 176, 187, 0.3),
                    rgba(32, 30, 28, 0.3),
                    rgba(32, 30, 28, 0.3));
            backdrop-filter: blur(8px);
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0 0 6px 6px;

            &>.Title {
                position: absolute;
                left: 0;
                top: -58px;
                width: 100%;
                height: 58px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: Microsoft YaHei;
                font-weight: bold;
                font-size: 36px;
                color: #ffffff;
            }

            &>.SignUp {
                width: 60%;

                .ant-input-affix-wrapper {
                    height: 56px;
                    background-color: transparent;
                    border-color: transparent;
                    overflow: hidden;
                    backdrop-filter: blur(4px);
                    border-radius: 15px;
                    box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),
                        -1px -1px 6px rgba(255, 255, 255, 0.4);

                    &:hover,
                    &:focus-within {
                        box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),
                            -1px -1px 6px rgba(255, 255, 255, 0.4),
                            inset 3px 3px 10px rgba(0, 0, 0, 1),
                            inset -1px -1px 6px rgba(255, 255, 255, 0.4);

                        &::after {
                            left: -10%;
                        }
                    }

                    &::after {
                        position: absolute;
                        content: "";
                        left: 150%;
                        top: 0;
                        width: 120%;
                        height: 100%;
                        background: linear-gradient(90deg,
                                rgba(0, 176, 187, 0.3),
                                rgba(32, 30, 28, 0.4),
                                rgba(32, 30, 28, 0.4));
                        backdrop-filter: blur(4px);
                        transform: skewX(-15deg);
                        transition: all 0.75s ease;
                        border-radius: 6px;
                        z-index: -1;
                    }

                    .ant-input {
                        background: transparent;
                        font-family: Microsoft YaHei;
                        font-weight: bold;
                        font-size: 18px;
                        color: #00ffff;
                        text-indent: 16px;

                        &::placeholder {
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 18px;
                            color: #68a3a0;
                        }
                    }

                    .ant-input-prefix,
                    .ant-input-suffix {
                        color: rgba(0, 252, 255, 1);
                        font-size: 24px;
                        margin-right: 16px;

                        &>span {
                            color: rgba(0, 252, 255, 1);
                        }
                    }
                }

                .SignUpBtn {
                    margin-bottom: 0;
                    position: relative;
                    z-index: 1;

                    &::after {
                        position: absolute;
                        content: "";
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        background: rgba(0, 0, 0, 0.15);
                        backdrop-filter: blur(4px);
                        z-index: 1;
                        pointer-events: none;
                        border-radius: 15px;
                    }

                    button {
                        position: relative;
                        width: 100%;
                        height: 56px;
                        border-radius: 15px;
                        border: 0px;
                        outline: 0px;
                        background: transparent;
                        cursor: pointer;
                        box-shadow: 3px 3px 10px rgba(0, 0, 0, 1),
                            -1px -1px 6px rgba(255, 255, 255, 0.4);

                        &::after,
                        &::before {
                            position: absolute;
                            content: "";
                            transition: all ease-in-out 0.35s;
                            width: 64%;
                            height: 72%;
                            z-index: -1;
                            border-radius: 15px;
                            mix-blend-mode: multiply;
                            -webkit-box-reflect: below 16px linear-gradient(to bottom,
                                    rgba(0, 0, 0, 0),
                                    rgba(0, 0, 0, 0.15));
                        }

                        &::after {
                            background: linear-gradient(-45deg,
                                    rgba(2, 29, 78, 0.5) 0%,
                                    rgba(31, 215, 232, 0.7) 60%,
                                    rgba(2, 29, 78, 0));
                            top: 4px;
                            left: 4px;
                        }

                        &::before {
                            background: linear-gradient(45deg,
                                    rgba(2, 29, 78, 0.5) 0%,
                                    rgba(31, 215, 232, 0.7) 60%,
                                    rgba(2, 29, 78, 0));
                            bottom: 4px;
                            right: 4px;
                        }

                        &>span {
                            position: absolute;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            left: 0;
                            top: 0;
                            width: 100%;
                            height: 56px;
                            border-radius: 15px;
                            background: rgba(0, 0, 0, 0);
                            font-weight: bold;
                            font-size: 18px;
                            color: #ffffff;
                            transition: all ease-in-out 0.35s;
                            z-index: 2;
                            -webkit-box-reflect: below 8px linear-gradient(to bottom,
                                    rgba(0, 0, 0, 0),
                                    rgba(0, 0, 0, 0.15));
                        }

                        &.ant-btn-loading,
                        &:hover {

                            &::after,
                            &::before {
                                width: calc(100% - 8px);
                                height: calc(100% - 8px);
                                border-radius: 15px;
                            }

                            &>span {
                                font-size: 24px;
                            }
                        }
                    }
                }
            }
        }

        &>.Back {
            position: absolute;
            z-index: -1;
            width: 634px;
            height: 150px;
            margin-top: 58px;
            background: linear-gradient(45deg,
                    rgba(0, 131, 126, 0),
                    rgba(32, 30, 28, 0),
                    rgba(0, 131, 126, 0));
            backdrop-filter: blur(8px);
            transform: skewY(15deg);
            border-radius: 6px;
            transition: all 1.35s;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            overflow: hidden;
            animation: BACK 10s ease-in-out 2s infinite;

            &>.item {
                position: absolute;
                background-color: transparent;
                width: calc(var(--i) * 28px);
                aspect-ratio: 1;
                border-radius: 50%;
                border: 5px solid rgb(0, 200, 255);
                transform-style: preserve-3d;
                transform: rotateX(70deg) translateZ(50px);
                animation: my-move 4s ease-in-out calc(var(--i) * 0.15s) infinite;
                box-shadow: 0px 0px 15px rgb(124, 124, 124),
                    inset 0px 0px 15px rgb(124, 124, 124);
            }

            @keyframes BACK {

                0%,
                100% {
                    transform: skewY(15deg);
                }

                50% {
                    transform: skewY(-15deg);
                }
            }

            @keyframes my-move {

                0%,
                100% {
                    transform: rotateX(70deg) translateZ(50px) translateY(0px);
                    filter: hue-rotate(0deg);
                }

                50% {
                    transform: rotateX(70deg) translateZ(50px) translateY(-50vmin);
                    filter: hue-rotate(180deg);
                }
            }
        }

        &:hover {
            &>.Box {
                &::after {
                    top: 10px;
                    left: -160px;
                    background: linear-gradient(-45deg,
                            rgba(0, 176, 187, 0.3),
                            rgba(0, 176, 187, 0.1));
                    backdrop-filter: blur(8px);
                }

                &::before {
                    top: 240px;
                    right: -160px;
                    background: linear-gradient(-45deg,
                            rgba(0, 176, 187, 0.3),
                            rgba(0, 176, 187, 0.1));
                    backdrop-filter: blur(8px);
                }
            }

            &>.Back {
                height: 342px;
                transform: skewY(0);
                animation: none;
                background: linear-gradient(45deg,
                        rgba(0, 131, 126, 0.3),
                        rgba(32, 30, 28, 0),
                        rgba(0, 131, 126, 0.3));
            }
        }
    }
}